<template>
	<view class="mainBox">
		<view class="storedeposit-container">
			<c-layout>
				<c-navigation-bar slot="head" :title="$t('storeManagement.storeDeposit')" navbar-bg-color="#8CA6FF"
					leftIconColor="#fff" title-color="#fff" @backEvent="$u.route('pages/storyType/storeManagement')">
				</c-navigation-bar>
				<view class="dataBox">
					<view class="InformationBox">
						<view class="Information">
							<text>{{$t('anchorConsole.ShopClass')}}：{{shopLevel}}</text>
							<text style="margin-left: 40rpx;">{{$t('user.requiredMargin')}}：${{needPay.toFixed(2)}}</text>
						</view>
						<view class="Information">
							<view class="">
								<text>{{$t('user.hasPay')}}：</text><text
									style="font-size: 36rpx;color: orange;font-weight: bolder;">${{currentDeposit?currentDeposit.toFixed(2):0}}</text>
							</view>

						</view>
						<view class="Information" v-if="amount!==0">
							<text style="color: grey;">{{$t('storeManagement.MarginError')}}</text>
						</view>
						<view class="Information">
							<text>{{$t('user.upgrade')}}{{$t('user.needMoney')}}：${{amount.toFixed(2)}}</text>
						</view>

					</view>
				</view>
				<view class="contentBox">
					<titleInput :paddingLeft="'40rpx'" disabled v-model="amountInput" focusColor="#2934D0"
						:title="$t('liveBar.inputAmount')" type='number'>
						<view class="leftIcon" slot="right-icon" style="padding-right: 30rpx;">
							$
						</view>
					</titleInput>

					<button style="margin-top: 20rpx;" class="" :disabled="amount==0" @click="submitClick"
						type="default">{{$t('order.immediatePayment')}}</button>
					<view class="depositTitle">
						{{$t('storeManagement.MarginTransaction')}}
					</view>
					<scroll-view class="depositMainBox" scroll-y="true" @scrolltolower="onreachBottom">
						<view class="depositMain" v-for="(item,index) in dataList" :key="index">
							<view class="depositText">
								{{item.category}}
							</view>
							<view class="depositText">
								${{item.amountIncurred}}
							</view>
							<view class="depositTime">
								{{publicJS.timeZoneSwitching(item.payDate)}}
							</view>
						</view>


					</scroll-view>

				</view>
			</c-layout>
		</view>
		<inputPayPassword @finish="finish" :payPwdPopShow.sync="showPassWorld" :title="pswTitle" :amount="amountInput"
			:maxlength="6" @close="cancel"></inputPayPassword>
		<u-toast ref="uToast" />
	</view>

</template>
<script>
	export default {
		data() {
			return {
				isActive: 0,
				amount: 0,
				needPay: 0,
				amountInput: "",
				amountList: [100, 200, 500, 1000, 2000, 5000],
				pageSize: 10,
				pageNum: 1,
				shopLevel: '',
				currentDeposit: "", //当前保证金
				showPassWorld: false,
				pswTitle: this.$t('storeManagement.EnrollmentDeposit'),
				dataList: [],
			}
		},
		onLoad() {
			this.$u.post('/app/shop/Balance/detail/emList', { pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
				console.log(res.data)

				this.dataList = res.data.records
			})

			this.$u.get('/app/shop/balance').then(res => {
				console.log(res)
				this.currentDeposit = res.data.earnestMoney
			})
			this.$u.get('/app/shop').then(res => {
				this.shopLevel = res.data.shopLevel
				this.$u.get('/app/shop-level/' + res.data.shopLevelId).then((r) => {
					this.needPay = r.data.earnestMoney
				});
			})
			this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
				this.amount = res.data
				this.amountInput = this.amount != 0 ? this.amount : 0
			})

		},
		methods: {
			onreachBottom() {
				this.pageNum = this.pageNum + 1
				this.$u.post('/app/shop/Balance/detail/emList', { pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
					console.log(res.data)
					this.dataList=[
						...this.dataList,
						...res.data.records
					]
				})
			},
			//提交
			submitClick() {
				uni.$http.get(`/app/anchor/lives/gift/exchangeGold`).then((res) => {
					console.log('账户余额', res);
					this.accountMoney = res.data.userBalance;
					if (res.data.userBalance >= this.amountInput) {
						this.showPassWorld = true
					} else {
						this.showToast(this.$t('moneyManagement.notFonds'))
						setTimeout(() => {
							//到充值页
							uni.navigateTo({
								url: '/pages/recharge/recharge',
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
						}, 1500)
					}
				});

			},
			showToast(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'default '
				});
			},
			cancel() {
				this.showPassWorld = false
			},
			finish(e) {
				this.$u.post(`/app/shop/pay/earnestMoney`, {
					password: e,
				}).then((res) => {
					this.showToast(this.$t('storeManagement.EnrollmentDeposit'))
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/storyType/storeManagement'
						})
					}, 1500)

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		position: relative;

		.storedeposit-container {
			background-color: #8CA6FF;
			height: 140rpx;
		}

		.dataBox {
			background-color: #8CA6FF;
			width: 100%;
			height: 96rpx;

			.InformationBox {
				position: absolute;
				top: 40rpx;
				left: calc(50% - 335rpx);
				width: 670rpx;
				height: 274rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 12rpx 50rpx 0rpx rgba(0, 0, 0, 0.102);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				text-indent: 72rpx;

				.Information {
					color: #1B1D29;
					font-size: 28rpx;
				}
			}
		}

		.contentBox {
			margin-top: 280rpx;
			padding: 0 40rpx;
		}

		.amountBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.amountItem {
				margin-top: 40rpx;
				margin-bottom: 10rpx;
				width: 194rpx;
				height: 120rpx;
				background: #F4F4F4;
				border-radius: 24rpx;
				opacity: 1;
				text-align: center;
				line-height: 120rpx;
				font-size: 32rpx;
				color: #02010E;
			}

			.amountItem.active {
				background-color: #2935d0;
				color: #fff;
			}
		}

		.submit-btn {
			// width: calc(100% - 80rpx);
			height: 120rpx;
			background-color: #2935d0;
			color: #fff;
			margin-top: 40rpx;
		}

		.depositTitle {
			font-size: 36rpx;
			font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
			font-weight: 700;
			color: #3D3D3D;
			line-height: 40rpx;
			margin-top: 40rpx;
		}

		.depositMainBox {
			height: 45vh;
			overflow: auto;

			.depositMain {
				display: flex;
				justify-content: space-between;

				.depositText {
					font-size: 30rpx;
					font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
					font-weight: 400;
					color: #111118;
					line-height: 34rpx;
					margin-top: 40rpx;
				}

				.depositTime {
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
					font-weight: 400;
					color: #91909A;
					line-height: 40rpx;
					margin-top: 40rpx;
				}
			}

		}

	}
</style>